<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模块化开发</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <script type="module">
        /**
         * 模块化开发时指将复杂的功能拆分为独立的模块，每个模块负责完成特定的功能。
         * 可以使用 export 关键字导出
         * 可以使用 import 关键字导入
         *
         * 需要live server
         */

        import {title as webTitle, web, getWeb} from './js/single.js';
        import obj from './js/object.js'; // 使用 default 关键字导出所有元素
        import * as star from './js/single.js' // 用'*'通配文件中所有元素并将其赋给star

        console.log("title: ", webTitle);
        console.log("web: ", web);
        console.log("getWeb: ", getWeb());

        console.log("obj.title: ", obj.title);
        console.log("obj.web: ", obj.web);
        console.log("obj.getWeb: ", obj.getWeb());

        console.log("star.title: ", star.title);
        console.log("star.web: ", star.web);
        console.log("star.getWeb: ", star.getWeb());
    </script>
</body>
</html>